<template>
	<view class="body">
		<!-- 头像 -->
		<view class="head-portrait" v-if="userInfo">
			<image :src="userInfo.avatarUrl" mode="" class="head-image"></image>
			<view class="head-text head-text1">
				<text class="nickName"></text>
				<text class="subtitle" @tap="logout">退出登录</text>
			</view>
		</view>
		<view class="head-portrait" v-else>
			<image src="https://s1.ax1x.com/2022/07/27/vp2wuD.png" mode="" class="head-image"></image>
			<view class="head-text">
				<text class="head-title" @tap="login">立即登录</text>
				<text class="head-subtitle">登录后可收藏喜欢的菜谱</text>
			</view>
		</view>
		<!-- 升级为VIP -->
		<view class="upgrade">
			<image src="https://s1.ax1x.com/2022/07/27/vp20De.md.png" mode="" class="upgrade-image"></image>
			<view class="upgrade-absolute" @tap="turnToMyVIP">
				<text class="upgrade-text" v-if="isVip == false">升级为VIP</text>
				<text class="upgrade-text" v-else>续费VIP</text>
				<image src="https://s1.ax1x.com/2022/07/27/vp2IEj.png" mode="" class="upgrade-returnImg"></image>
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<!-- 宫格布局 -->
		<u-grid :col="3">
			<u-grid-item :custom-style="custom_style1">
				<view @tap="getCollect" class="grid-item">
					<u-icon name="star-fill" :size="50" :color="icon_color1"></u-icon>
					<view class="grid-text">我的收藏</view>
				</view>
			</u-grid-item>
			<u-grid-item :custom-style="custom_style2">
				<view class="grid-item" @tap="getRecord">
					<u-icon name="clock-fill" :size="50" :color="icon_color2"></u-icon>
					<view class="grid-text">浏览记录</view>
				</view>
			</u-grid-item>
			<u-grid-item :custom-style="custom_style3">
				<u-icon name="https://s1.ax1x.com/2022/07/27/vp2vb4.png" :size="50"></u-icon>
				<view class="grid-text">点赞</view>
			</u-grid-item>
		</u-grid>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<!-- 收藏、浏览记录显示区域 -->
		<view v-if="userInfo">
			<!-- 标签 -->
			<view class="tags">
				<u-tabs :list="list" :is-scroll="true" :current="current" font-size="17rpx" active-color="#ee7b2d"
					:show-bar="false" @change="change"></u-tabs>
				<!-- 分割线 -->
				<u-divider bg-color="#f5f5f5"></u-divider>
			</view>
			<!-- 展开更多 -->
			<view class="readMore">
				<u-read-more ref="uReadMore" :toggle="true" show-height="350" color="#ee7b2d">
					<rich-text>
						<view class="readMore-item">
							<view class="readMore-text">
								<text></text>
								<text></text>
							</view>
							<u-divider bg-color="#f5f5f5"></u-divider>
						</view>
					</rich-text>
				</u-read-more>
			</view>
		</view>
		<view class="readMore noLogin" v-else>
			<view class="none">
				未登录，暂无收藏
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<!-- 我的菜谱 -->
		<view class="myMenu">
			<text class="myMenu-title">我的菜谱</text>
			<view class="myMenu-container">
				<view class="menu-item">
					<image src="" mode="" class="menu-image"></image>
					<text class="menu-text"></text>
				</view>
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>

		<view class="bottom">
			<view class="bottom-item">
				<view class="bottom-left">
					<image src="https://s1.ax1x.com/2022/07/27/vp2vb4.png" mode="" class="bottom-image1"></image>
					<text class="bottom-text">去App Store给菜谱大全评分</text>
				</view>
				<image src="https://s1.ax1x.com/2022/07/27/vp2b80.png" mode="" class="bottom-image2"></image>
			</view>
			<!-- 分割线 -->
			<u-divider bg-color="#f5f5f5"></u-divider>
			<view class="bottom-item">
				<view class="bottom-left">
					<image src="https://s1.ax1x.com/2022/07/27/vp2XKU.png" mode="" class="bottom-image1"></image>
					<text class="bottom-text">反馈问题</text>
				</view>
				<image src="https://s1.ax1x.com/2022/07/27/vp2b80.png" mode="" class="bottom-image2"></image>
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				userInfo: null,
				myCollect: [],
				myCollect1: [],
				custom_style1: {
					color: "#ee7b2d"
				},
				custom_style2: {
					color: "#ccc"
				},
				custom_style3: {
					color: "#ccc"
				},
				icon_color1: "#ee7b2d",
				icon_color2: "#ccc",
				isVip: false,

			}
		},
		created() {
			
		},
		methods: {
			


		}
	}
</script>

<style lang="scss" scoped>
	.head-portrait {
		width: 100%;
		display: flex;
		padding: 10rpx 32rpx 0;

		.head-image {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}

		.head-text {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.head-title {
				font-size: 32rpx;
			}

			.head-subtitle {
				font-size: 25rpx;
				color: #d1d1d1;
				margin-top: 10rpx;
			}
		}

		.head-text1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-grow: 1;
			justify-content: space-between;
		}
	}

	.upgrade {
		padding: 0 32rpx;
		position: relative;

		.upgrade-image {
			width: 100%;
			height: 118rpx;
			margin: 34rpx auto 0;
		}

		.upgrade-absolute {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 520rpx;
			margin: 0 auto;
			position: absolute;
			top: 55rpx;
			left: 135rpx;

			.upgrade-text {
				color: #b89766;
			}

			.upgrade-returnImg {
				width: 20rpx;
				height: 22rpx;
			}
		}
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	// 宫格布局
	.grid-text {
		font-size: 30rpx;
		margin-top: 4rpx;
	}

	.tags {
		padding: 0 16rpx;
	}

	//隐藏滚动条
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.readMore {
		padding: 0 32rpx;
		height: 400rpx;
		overflow-y: scroll;

		.readMore-item {

			.readMore-text {
				display: flex;
				width: 520rpx;
				justify-content: space-between;

				&:last-child {
					width: 100%;
					justify-content: center;
					align-items: center;
				}

				.readMore-image {
					width: 35rpx;
					height: 35rpx;
					margin-left: 10rpx;
					margin-top: 7rpx;
				}
			}
		}
	}

	.noLogin {
		display: flex;
		width: 100%;
		height: 400rpx;
		justify-content: center;
		align-items: center;
	}

	//隐藏滚动条
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.myMenu {
		padding: 0 32rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;

		.myMenu-title {
			margin-bottom: 32rpx;
		}

		.myMenu-container {
			display: flex;
			overflow-x: scroll;
		}

		.menu-item {
			width: 172rpx;
			margin-right: 32rpx;

			.menu-image {
				width: 172rpx;
				height: 208rpx;
				border-radius: 10rpx;
			}

			.menu-text {
				width: 172rpx;
				display: block;
				text-align: center;
				margin-top: 10rpx;
				margin-bottom: 16rpx;
			}
		}
	}

	.bottom {
		padding: 0 32rpx;

		.bottom-item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bottom-left {
				display: flex;
				align-items: center;
			}

			.bottom-image1 {
				width: 44rpx;
				height: 44rpx;
				margin-right: 26rpx;
			}

			.bottom-image2 {
				width: 30rpx;
				height: 34rpx;
			}
		}
	}
</style>
